<template>
  <viwe>
    <add-order-cell label="出发时间" has-slot must arrow @click="changeDate('start')">
      <text class="text-30" :class="['color-t' + (form.startDate ? 1 : 3)]">{{ form.startDate || '请选择出发时间' }}</text>
    </add-order-cell>

    <add-order-cell label="结束时间" has-slot must arrow @click="changeDate('end')">
      <text class="text-30" :class="['color-t' + (form.endDate ? 1 : 3)]">{{ form.endDate || '请选择结束时间' }}</text>
    </add-order-cell>

    <template v-if="module">
      <add-order-cell label="出发地" has-slot must @click="choosePosition('from')">
        <view class="flex-item flex-row align-center justify-between">
          <text class="text-30 flex-item" :class="['color-t' + (form.from ? 1 : 3)]">{{ form.from || '请选择出发地' }}</text>
          <view class="middle-pause margin-left-10" @click.stop="addStopSite">
            <text class="tbb-tianjia1 text-26 color-t3" />
            <text class="text-26 color-t3">停靠点</text>
          </view>
        </view>
      </add-order-cell>

      <template v-if="showStopSite.length">
        <add-order-cell v-for="(site,idx) in showStopSite" :key="idx" :label="'停靠点'+ (idx + 1)" has-slot>
          <view class="flex-item flex-row align-center justify-between">
            <text class="text-30 color-t1">{{ site }}</text>
            <view class="middle-pause padding-left-10" @click="deletePosition(idx)">
              <text class="tbb-shanchu text-36 color-t3" />
            </view>
          </view>
        </add-order-cell>
      </template>

      <add-order-cell label="目的地" has-slot must unlined @click="choosePosition('to')">
        <text class="text-30" :class="['color-t' + (form.to ? 1 : 3)]">{{ form.to || '请选择目的地' }}</text>
      </add-order-cell>
    </template>

    <add-order-cell v-else label="行程路线" has-slot must unlined un-hover align-items="flex-start">
      <view class="textarea-box">
        <textarea
          class="textarea text-30 color-t1"
          :value="form.itinerary"
          placeholder="请输入或复制粘贴行程路线"
          placeholder-class="color-t3"
          :show-confirm-bar="false"
          @input="changeValue"
        />
      </view>
    </add-order-cell>
  </viwe>
</template>

<script>
import AddOrderCell from '../add-order-cell/add-order-cell'
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'OrderInfoModule',
  components: {
    AddOrderCell
  },
  props: {
    module: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: () => {}
    },
    stopSite: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        startDate: '', // 出发时间,
        endDate: '', // 结束时间
        from: '', // 出发点请求数据
        fromLat: '', // 出发点请求数据
        fromLnt: '', // 出发点请求数据
        stopSite: [], // 停靠点
        to: '', // 到达点请求数据
        toLat: '', // 到达点请求数据
        toLnt: '', // 到达点请求数据
        itinerary: '' // 行程路线
      },
      start: '', // 开始判断时间
      end: '', // 结束判断时间
      showStopSite: [] // 停靠点显示数据
    }
  },
  computed: {
    ...mapGetters({
      selectMapResult: 'selectMapResult'
    })
  },
  watch: {
    form: {
      handler(e) {
        this.$emit('update', e)
      },
      deep: true
    },
    data: {
      handler(e) {
        this.initData(e)
      },
      deep: true
    },
    stopSite(e) {
      this.initStopSite(e)
    },
    selectMapResult(e) {
      if (e) {
        this.setPosition()
      }
    }
  },
  created() {
    if (this.type === 'edit') this.initData(this.data)
  },
  destroyed() {
  	this.setSelectedFromTo({to: null, from: null})
  },
  methods: {
    initData(e) {
      Object.keys(this.form).forEach(item => {
        this.form[item] = e[item]
      })
    },
    initStopSite(e) {
      if (e) {
        const stopArr = e.split(',')
        for (let i = 0; i < stopArr.length; i++) {
          const siteArr = stopArr[i].split('|')
          this.showStopSite.push(siteArr[0]) // 用户显示停靠点
        }
      }
    },
    // 修改值
    changeValue(e) {
      this.form.itinerary = e.detail.value
    },
    // 修改时间
    changeDate(e) {
      this.$emit('changeDate', e)
    },
    // 选择位置
    choosePosition(value) {
      this.path = value
      this.jump('/order/map-select/map-select?path=' + this.path)
    },
    // 添加停靠点
    addStopSite() {
      if (!this.form.from) {
        this.toast('请先选择出发点')
        return
      }
      this.choosePosition('site')
    },
    // 展示开始/结束/停靠点
    setPosition() {
      const place = this.selectMapResult
      const title = place.name
      const locations = place.location.split(',')
      const path = place.path
      if (path !== 'site') {
        this.form[path] = title
        this.form[path + 'Lnt'] = locations[0]
        this.form[path + 'Lat'] = locations[1]
      } else {
        const position = title + '|' + locations[0] + '|' + locations[1]
        this.showStopSite.push(title)
        this.form.stopSite.push(position)
      }
      this.setSelectMapResult(null)
    },
    // 删除停靠点位置
    deletePosition(idx) {
      this.showStopSite.splice(idx, 1)
      this.form.stopSite.splice(idx, 1)
    },
    ...mapMutations({
      setSelectMapResult: 'order/setSelectMapResult',
	  setSelectedFromTo: 'order/setSelectedFromTo'
    })
  }
}
</script>

<style scoped>
.textarea-box{
  padding:18rpx 20rpx;
  background: #F7F7F7;
  border-radius: 10rpx;
}
.textarea{
  height: 140rpx;
  width: 405rpx;
}
</style>
